<template>
    <div>
        <!--<header>-->
        <!--<van-nav-bar title="home"/>-->
        <!--</header>-->
        <div v-show="!showHead" @click="userLogin" class="top login" style="display:flex;justify-content: space-around;align-items: center;padding-bottom: 0;margin-top: 20px;margin-left: 10px;margin-right: 10px;border-radius: 4px">
            <div class="headimg-id">
                <img src="/img/no.jpg" alt="">
                <h3><span>登陆</span><span></span></h3>
            </div>
        </div>
        <div v-show="showHead" class="top" @click="gotoUserInfo">
            <div class="headimg-id">
                <img :src="user.headimgurl" alt="">
                <h3><span>{{user.nickname}}&nbsp;&nbsp;{{'id：'+user.uid}}</span><span style="font-size: 14px;"> </span></h3>
            </div>
            <div class="text-num">
                <div>
                    <p>总余额</p>
                    <strong class="number_font">{{user.balance | formatNum}}</strong>
                </div>
                <div class="right">
                    <p>总收益</p>
                    <strong class="number_font">{{user.profit | formatNum}}</strong>
                </div>
            </div>
            <div class="box">
                <div class="left">
                    <div class="item1" @click.stop="gotoUserAuth">
                        <i class="zx-icon">&#xe600;</i>
                        <span>未认证</span>
                    </div>
                    <div @click.stop="history" class="item2" to="">
                        <i class="zx-icon">&#xe676;</i>
                        <span>历史发布</span>
                    </div>
                </div>
                <div class="right">
                    <div @click.stop="gotoBill" class="item1">
                        <i class="zx-icon">&#xe686;</i>
                        <span>账单</span>
                    </div>
                    <div @click.stop="withdraw(user.balance)" class="item2" tag="a">
                        <i class="zx-icon">&#xe603;</i>
                        <span>提现</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="item-list">
            <div class="box">
                <router-link class="item" tag="div" :to="{name:'faq'}">
                    <div class="faq">
                        <i class="zx-icon icon-l">&#xe61c;</i>
                        <span>常见问题</span>
                    </div>
                    <i class="zx-icon icon-r">&#xe6be;</i>
                </router-link>
                <div class="item" @click="invite">
                    <div class="faq invite">
                        <i class="zx-icon icon-l">&#xe61d;</i>
                        <span>邀请好友</span>
                    </div>
                    <i class="zx-icon icon-r">&#xe6be;</i>
                </div>
              <!--  <router-link class="item" tag="div" :to="{name:'invite'}">
                    <div class="faq about">
                        <i class="zx-icon icon-l">&#xe693;</i>
                        <span>邀请好友</span>
                    </div>
                    <i class="zx-icon icon-r">&#xe6be;</i>
                </router-link>-->
            </div>
            <div class="box">
                <!--/change-->
                <!--<div class="item">
                    <div class="faq change">
                        <i class="zx-icon icon-l">&#xe6a0;</i>
                        <span>身份切换</span>
                    </div>
                    <i class="zx-icon icon-r">&#xe6be;</i>
                </div>-->
                <div @click="quit" class="item">
                    <div class="faq exit">
                        <i class="zx-icon icon-l">&#xe6d0;</i>
                        <span>退出账号</span>
                    </div>
                    <!--<i class="zx-icon icon-r">&#xe6be;</i>-->
                </div>

            </div>
        </div>
        <van-dialog
                v-model="withdrawShow"
                show-cancel-button
                :before-close="withdrawHandle"
        >
            <h3 align="center" style="line-height: 50px;border-bottom: 1px solid #eee;color:#333;">提款申请</h3>
            <van-field
                    required
                    v-model="withdrawNum"
                    label="提款金额"
                    type="number"
                    placeholder="请输入提款金额"
            />
            <van-field
                    required
                    type="text"
                    label="提款微信号"
                    v-model="account"
                    placeholder="请输入提款微信号"
            />
            <van-field
                    required
                    type="text"
                    v-model="username"
                    label="姓名"
                    placeholder="请输入真实姓名"
            />
        </van-dialog>
    </div>
</template>
<script>
    import {mapMutations,mapState} from 'vuex';
    import Vue from 'vue'
    import {Field,Dialog,Notify} from 'vant'
    Vue.use(Dialog)
    Vue.use(Field)
    Vue.use(Notify)
    export default {
        components:{
            'vant-dialog':Dialog
        },
        data(){
            return{
                user:'',
                withdrawNum:'',
                showHead:'',
                withdrawShow:false,
                username:'',
                account:'',
            }
        },
        created(){

            if(localStorage.getItem('user')){
                this.user = JSON.parse(localStorage.getItem('user'))
                this.access_token = localStorage.getItem('access_token')
            };
            if(this.user){
                this.showHead = true
                this.$post('/api/user/baseInfo',{uid:JSON.parse(localStorage.getItem('user')).uid}).then(res=>{
                    if(res.data.err_code == 0){
                        this.user = res.data.data;
                        this.saveUserInfo({user:res.data.data,access_token:res.data.data.access_token})
                        localStorage.setItem('user',JSON.stringify(res.data.data))
                        localStorage.setItem('access_token',JSON.stringify(res.data.data.access_token))
                    }else{
                        //
                    }
                })
            }else{
                this.showHead = false;
            }
            this.check()
            document.body.style.backgroundColor='rgb(239, 243, 246)'
        },
        computed:{
            // ...mapState(['user','access_token'])

        },
        mounted(){
            // this.user = localStorage.getItem('user')
        }
        ,methods:{
            ...mapMutations(['saveUserInfo']),

            withdrawHandle(action, done){
                let that = this;
                if (action === 'confirm') {
                    let amount = this.withdrawNum;
                    let account = this.account;
                    let username = this.username;
                    let uid = JSON.parse(localStorage.getItem('user')).uid;
                    if(!account || account ==''){
                        that.$notify('请输入账号');
                        done();
                        this.withdrawShow = true;
                        return;
                    };
                    if(!amount || amount =='' || isNaN(amount)){
                        that.$notify('请输入真确的金额');
                        done();
                        this.withdrawShow = true;
                        return;
                    };
                    if(!username || username ==''){
                        that.$notify('请输入提款金额');
                        done();
                        this.withdrawShow = true;
                        return;
                    };
                    this.$axios.post('/api/cash/apply',{amount,account,username,uid}).then(res=>{
                        if(res.data.err_code ==0){
                            this.$notify('提款申请成功，请等待审核');
                            this.$post('/api/user/baseInfo',{uid:JSON.parse(localStorage.getItem('user')).uid}).then(res=>{
                                if(res.data.err_code == 0){
                                    this.user = res.data.data;
                                    this.saveUserInfo({user:res.data.data,access_token:res.data.data.access_token})
                                    localStorage.setItem('user',JSON.stringify(res.data.data))
                                    localStorage.setItem('access_token',JSON.stringify(res.data.data.access_token))
                                }else{
                                    //
                                }
                            })
                        }else{
                            this.$notify('提款失败，'+res.data.err_msg);
                        }
                        done();
                    }).catch(err=>{
                        this.$notify(res.data.msg)
                        done();
                    })

                } else {
                    done();
                }
            },
            history(){
                this.$dialog.alert({message:'即将开放，敬请期待'})
            },
            withdraw(num){
                    this.withdrawShow = true;
                    this.withdrawNum=this.user.balance

             if(num<20){
                 this.$dialog.alert({title:'申请提现',message:'申请提现金额必须≥20哦~'})
             }else {
                 this.$post('/api/user/getBaseUserInfo',{uid:JSON.parse(localStorage.getItem('user')).uid}).then(res=>{
                     if(res.data.err_code ==0){
                         // this.userBaseInfo = res.data.data;
                         this.username = res.data.data.uname;
                         this.account = res.data.data.wechat;
                     }
                 }).catch(err=>{
                     console.log(err)
                 })
             }
            },
            invite(){
              this.$dialog.alert({title:'邀請好友',message:'点击微信右上角，选择分享到朋友圈或分享给朋友即可'})
            },
            userLogin(){
                let returnUrl = encodeURIComponent(window.location.href);
                let state = '';
                if(localStorage.getItem('invite_code')){
                    state = localStorage.getItem('invite_code');
                };
                window.location.href =
                    'https://open.weixin.qq.com/connect/oauth2/authorize?' +
                    'appid=wx838cf54dd030d93a&redirect_uri=' + returnUrl +
                    '&response_type=code&scope=snsapi_userinfo&' +
                    'state='+ state +'#wechat_redirect'

            },
            check(){
                let code = this.$route.query.code;
                let state = this.$route.query.state;
                if(!code){return}
                this.$get('/api/login', {
                    params: {
                        code: code,
                        state: state
                    }
                }).then(res => {
                    if(res.data.err_code == 0){
                        this.saveUserInfo({user:res.data.data.user,access_token:res.data.data.access_token})
                        localStorage.setItem('user',JSON.stringify(res.data.data.user))
                        localStorage.setItem('access_token',JSON.stringify(res.data.data.access_token))
                        this.user = res.data.data.user;
                        this.active = res.data.data.access_token;
                        this.$router.replace({name:this.$route.name})
                        this.showHead = true
                    }else{
                        this.$router.replace({name:this.$route.name})
                        this.$toast({message:res.data.err_msg})
                        this.userLogin()
                    }
                })
            },
            gotoUserAuth(){
                this.$router.push({name:'user_auth'})
            },
            gotoBill(){
                this.$dialog.alert({message:'正在升级，马上回来'})
                return;
                this.$router.push({name:'bill'})
            },
            gotoUserInfo(){
                this.$router.push({name:'user_info_edit',query:{uid:JSON.parse(localStorage.getItem('user')).uid}})
            },
            quit(){
                this.$dialog.confirm({
                    title: '退出登录',
                    message: '您确认要退出登录吗?'
                }).then(() => {
                    // on confirm
                    console.log('确认')
                    localStorage.clear();
                    this.$router.go(0)
                }).catch(() => {
                    // on cancel
                    console.log('取消')
                });
            }
        }
    }
</script>

<style lang="less" scoped>
    @import url('../../public/css/home.less');
</style>
